<template>
	<view>
		<view class="invokeRow cross-center">
			<text class="invokeLable">机构名称</text>
			<input class="invokeInput" :disabled="!canmodify" :value="mechanism.organizationName" @input="inpugChange" data-key='organizationName'></input>
		</view>
		<view class="invokeRow cross-center">
			<text class="invokeLable">机构类型</text>
			<radio-group @change="radioChange">
				<view class="typeBox">
					<view>
						<radio :value="1+''" color="#ee5b25" :checked="mechanism.type == 1" />分公司
					</view>
					<view>
						<radio :value="2+''" color="#ee5b25" :checked="mechanism.type == 2" />运营中心
					</view>
				</view>
			</radio-group>
		</view>
		<view class="invokeRow cross-center">
			<text class="invokeLable">申请人</text>
			<input class="invokeInput" :disabled="!canmodify" :value="mechanism.userName" @input="inpugChange" data-key='userName'></input>
		</view>
		<view class="invokeRow cross-center" style="justify-content: space-between;">
			<text class="invokeLable">所属区域</text>

			<lb-picker ref="picker3" v-model="value3" mode="multiSelector" :list="list" :level="2"
			 @confirm="handleConfirm" v-if="mechanism.type == 1">
			 <view @click="handleTap('picker3')">{{mechanism.area?mechanism.area:'点击选择所属区域'}}</view>
			</lb-picker>
			<lb-picker ref="picker3" v-model="value3" mode="multiSelector" :list="list" :level="3"
			 @confirm="handleConfirm" v-else>
			 <view @click="handleTap('picker3')">{{mechanism.area?mechanism.area:'点击选择所属区域'}}</view>
			</lb-picker>
			<!-- <view class="invokeInput cross-center" @click="selectArea">
				<view class="invokePicker inner">{{mechanism.area?mechanism.area:'点击选择所属区域'}}</view>
				<uniIcon type='arrowright'></uniIcon>
			</view> -->
		</view>
		<view class="invokeRow cross-center">
			<text class="invokeLable">详细地址</text>
			<input class="invokeInput" :disabled="!canmodify" :value="mechanism.address" @input="inpugChange" data-key='address'></input>
		</view>
		<view class="invokeRow cross-center" v-if="mechanism.status!=-1">
			<text class="invokeLable">审核状态</text>
			<view class="invokeInput cross-center">
				<view class="invokePicker inner">{{mechanism.status==1?'已同意':mechanism.status==0?'待审核':'已驳回'}}</view>
			</view>
		</view>
		<button class="bottombtn" :disabled="!canmodify" @click="commit">提交申请</button>
		<selectAddress ref='selectAddress' @selectAddress="successSelectAddress"></selectAddress>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import uniIcon from '@/components/uni-icons/uni-icons.vue'
	import selectAddress from '@/components/selectAddress/selectAddress.vue'
	import areaData from '@/district/area.js'
	export default {
		components: {
			uniIcon,
			selectAddress,
			LbPicker
		},
		data() {
			return {
				list: areaData,
				value3: [],
				allow: true,
				selectAddress: '',
				canmodify: true,
				mechanism: {
					userName: '',
					organizationName: '',
					area: '',
					address: '',
					type: '1'
				}
			};
		},
		onLoad() {
			this.loadOrgan();
		},
		methods: {
			handleTap (picker) {
				this.$refs[picker].show()
			},
			handleConfirm (item) {
				console.log(item)
				if(this.mechanism.type == 1){
					this.mechanism.area = item.item[0].label + item.item[1].label
				}else{
					this.mechanism.area = item.item[0].label + item.item[1].label + item.item[2].label
				}
				
			},
			loadOrgan() {
				let that = this
				that.$Request.request('/api/user_center/organization', 'GET', {}).then(res => {
					console.log(res)
					if (res.data.status == 1) {
						that.canmodify = false
					} else {
						that.mechanism = res.data
					}
				}).catch(err => {
					console.log(err)
				})
			},
			selectArea() {
				if (this.canmodify) {
					this.$refs.selectAddress.show()
				}
			},
			inpugChange(e) {
				console.log(e)
				let key = e.currentTarget.dataset.key;
				this.mechanism[key] = e.detail.value;
			},
			successSelectAddress(address) {
				this.mechanism.area = address
			},
			commit() {
				if (!this.allow && !this.canmodify) {
					return
				}
				if (!this.mechanism.organizationName) {
					this.$api.msg('请输入机构名称！')
					return
				}
				if (!this.mechanism.userName) {
					this.$api.msg('请输入申请人！')
					return
				}
				if (!this.mechanism.area) {
					this.$api.msg('请选择所属区域！')
					return
				}
				if (!this.mechanism.address) {
					this.$api.msg('请输入详细地址！')
					return
				}
				let that = this
				that.allow = false
				that.$Request.request('/api/user_center/organization', 'POST', that.mechanism).then(res => {
					if (res.status == 1) {
						that.$api.msg('提交申请成功，请等待审核！')
						setTimeout(function() {
							uni.navigateBack()
						}, 800)
					}

				}).catch(err => {
					console.log(err)
				})
			},
			radioChange(e) {
				console.log(e)
				this.mechanism.type = e.detail.value
				this.mechanism.area =''
			}
		}
	}
</script>

<style lang="scss">
	.invokeRow {
		background-color: #ffffff;
		height: 99rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		border-bottom: 1rpx solid #e2e2e2;
		color: #353535;
		@extend %flexVcenter;
	}

	.invokeLable {
		width: 124rpx;
	}

	.typeBox {
		width: 580rpx;
		padding: 0 30rpx;
		@extend %flexBetw;
	}

	.invokeInput {
		width: 580rpx;
		@extend %flexVcenter;
		align-items: center;
		padding-left: 30rpx;
	}

	.invokePicker {
		width: 520rpx;
		height: 99rpx;
	}

	.inner {
		line-height: 99rpx;
		text-align: right;
		padding-right: 1.5em;
	}

	.iconCon {
		width: 30rpx;
		display: flex;
		justify-content: center;
	}

	.icon {
		width: 12rpx;
		height: 24rpx;
	}

	.bottombtn {
		margin: 50rpx auto 0 auto;
		background-color: $themColor;
		width: 660rpx;
		border-radius: 100rpx;
		color: #fff;
		letter-spacing: 1em;
	}
</style>
